<template>
	<view>
		<video id="myVideo" :src="detail.videoUrl" binderror="videoErrorCallback" controls/>
		  <view v-if="!unlocked" class="detail-head">
				<text>￥{{courseInfo.price}}</text>
				<input name="unlock" bindinput="onInput" placeholder="请输入解锁码"/>
				<button @click="submitUnlock">{{buttonText}}</button>
		  </view>
		  <view class="detail-desc">
		    <text>{{courseInfo.desc}}-{{detail.desc}}</text>
		  </view>
		  <view class="detail-content">
		    <text>{{courseInfo.author}}{{courseInfo.subject}}</text>
			<br/><view>{{detail.content}}</view>
		  </view>
		  <view class="episode">
		  <block v-for="item in videoList" :key="item.lsnNo">
		      <button bindtap="onEpisodeSwitch" >
				{{item.lsnNo}}.{{item.desc}}
			  </button>
		  </block>
		  </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:{
					videoUrl:'',
					desc:'',
					content:''
				},
				courseInfo:{
					price:'',
					desc:'',
					author:'',
					subject:''
				},
				unlocked:true,
				videoList:[],
				buttonText:'解锁',
			}
		},
		onLoad() {
			
		},
		methods: {
			
		}
	}
</script>

<style>
video{
	width: 100%;

}
.detail-head {
  position: relative;
  margin: 0 40rpx;
}
.detail-head text{
  color: red;
  font-size: 50rpx;
  width: 120rpx;
  display: inline-block;

}
.detail-head input{
  display: inline-block;
  border:1rpx solid gray;
  margin: 0 10rpx;
}
.detail-head button{
  display: inline-block;
  line-height: 2;
  position: absolute;
  right: 0;
  background-color: red;
  color: white;

}
.detail-desc{
  text-align: left;
  font-weight: bold;
  margin: 30rpx;
  font-size: 50rpx;
}
.detail-content{
  margin: 50rpx;
  /*position: absolute;*/

}
.episode button{
  display: inline-block;
  width: 50%
}
</style>
